<template>

<div>
  <input type="text" placeholder="请输入关键字" v-model="keyword">
  <input type="button" value="查找" @click="btnQuery">
  <input type="button" value="新增" @click="btnAdd">
</div>
<table>
  <thead>
    <tr>
      <th>序号</th>
      <th>书名</th>
      <th>作者</th>
      <th>操作</th>
    </tr>
  </thead>
   <tbody>
    <tr v-for="item in books" :key="item.id">
      <td>{{ item.id }}</td>
      <td>{{ item.bookName }}</td>
      <td>{{ item.author }}</td>
      <td>
        <input type="button" value="编辑" @click="btnEdit(item.id)">
        <input type="button" value="删除" @click="btnDel(item.id)">
      </td>
    </tr>
   </tbody>
</table>

</template>

<script setup>
import { onMounted,ref,reactive} from 'vue';
import { useRouter } from 'vue-router';

let router=useRouter()

let keyword=ref('')

let books=reactive([])

onMounted(async () => {
  let data= await getAll();
  books.push(...data.data)
})


function btnAdd() {
  router.push('/bookadd')

}
async function btnDel(id) {
  if (confirm(`确实删除吗`)) {
    let res= await delItem(id)
    if (res.code=== 1000) {
      let index = books.findIndex(item=>item.id=id);
      books.splice(index,1)
    }else{
      console.log(res.msg);
      
    }
  }

}

function btnEdit(id) {
  router.push(`/bookedit/${id}`)
}
async function btnQuery() {
  let trimKeyword =keyword.value.trim();
  let data= await getAll(trimKeyword)
   
  books.splice(0);
  books.push(...data.data)
}

</script>